<script setup lang="ts">
import { useQueue } from 'wot-design-uni'

function handleClickLeft() {
  uni.navigateBack()
}

const { closeOutside } = useQueue()
const value1 = ref<number>(0)
const value2 = ref<number>(0)
const option1 = ref([
  { label: '全部来源', value: 0 },
  { label: '收银POS', value: 1 },
  { label: '点餐助手', value: 2 },
  { label: '点菜宝', value: 2 },
])
const option2 = ref([
  { label: '结账时间', value: 0 },
  { label: '下单时间', value: 1 },
  { label: '营业日期', value: 2 },
])
function handleChange1({ value }) {
  console.log(value)
}
function handleChange2({ value }) {
  console.log(value)
}

function toDetail() {
  uni.navigateTo({
    url: '/pages/shopOrder/detail',
  })
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden bg-white">
    <wd-navbar title="店内订单明细" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view @click="closeOutside">
      <wd-drop-menu>
        <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
        <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
      </wd-drop-menu>
    </view>
    <view class="flex items-center">
      <date-time-range-picker />
      <view class="h-[20px] w-[1px] bg-[#D9D9D9]" />
      <wd-button type="text">筛选</wd-button>
    </view>
    <view class="px-[15px] py-6">
      <view class="grid grid-cols-2 gap-2">
        <view class="box-border flex flex-col border-1 border-border rounded-md border-solid p-3">
          <wd-text text="订单原价(元)" size="12px" color="#666" />
          <wd-text text="50.50" size="16px" color="#333" bold class="mt-1" />
        </view>
        <view class="box-border flex flex-col border-1 border-border rounded-md border-solid p-3">
          <wd-text text="订单数(单)" size="12px" color="#666" />
          <wd-text text="2" size="16px" color="#333" bold class="mt-1" />
        </view>
        <view class="box-border flex flex-col border-1 border-border rounded-md border-solid p-3">
          <wd-text text="订单优惠(元)" size="12px" color="#666" />
          <wd-text text="50.50" size="16px" color="#333" bold class="mt-1" />
        </view>
        <view class="box-border flex flex-col border-1 border-border rounded-md border-solid p-3">
          <wd-text text="订单收入(元)" size="12px" color="#666" />
          <wd-text text="45.50" size="16px" color="#333" bold class="mt-1" />
        </view>
      </view>
      <view class="mt-2 flex justify-between">
        <wd-text text="抹零共9单，0.22元" size="14px" />
        <wd-text text="免找共0单，0.00元" size="14px" />
      </view>
    </view>
    <scroll-view
      class="box-border flex-1 overflow-hidden pl-[15px]"
      :show-scrollbar="false"
      scroll-y
    >
      <view
        class="flex justify-between border-b-1 border-b-border border-b-solid py-3"
        @click="toDetail"
      >
        <view class="flex flex-col">
          <wd-text text="#1" bold size="18px" color="#333" />
          <wd-text text="订单号：200112304003400423043" size="12px" class="mt-1" />
        </view>
        <view class="flex items-center pr-[10px]">
          <view class="flex flex-col items-end">
            <wd-text text="已结账" size="14px" color="#333" />
            <wd-text text="支付金额：25.50" size="12px" color="#333" class="mt-1" />
          </view>
          <wd-icon name="arrow-right" size="22px" class="ml-1" color="#909193" />
        </view>
      </view>
      <wd-loadmore state="finished" />
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-divider__line) {
  opacity: 0;
}
</style>
